<template>
    <view>

<!--        <view class="padding text-left">-->
<!--            <button @click="output" class="cu-btn radius shadow bg-blue margin-right">导出</button>-->
<!--            <button @click="showColumn" class="cu-btn radius shadow bg-yellow right margin-left">展开全部</button>-->
<!--        </view>-->


        <view class="text-left margin-top">
            <button @click="output" class="cu-btn radius shadow bg-blue margin-left">导出</button>
            <button @click="showColumn" class="cu-btn radius shadow bg-yellow right margin-left-xs">展开全部</button>
            <button @click="setAdmin" class="cu-btn radius shadow bg-green margin-left-xs">设为管理员</button>
            <button @click="revokeAdmin" class="cu-btn radius shadow bg-red right margin-left-xs">撤销管理员</button>
        </view>
        <view class="uni-container padding">
            <uni-table
                ref="table"
                :loading="loading"
                border
                stripe
                type="selection"
                emptyText="暂无更多数据"
                @selection-change="selectionChange">
                <uni-tr>
                    <uni-th align="center">学号</uni-th>
                    <uni-th align="center">姓名</uni-th>
                    <uni-th align="center" v-if="show">学院</uni-th>
                    <uni-th align="center" v-if="show">班级</uni-th>
                    <uni-th align="center" v-if="show">部门</uni-th>
                    <uni-th align="center" v-if="show">加入时间</uni-th>
                    <uni-th align="center" v-if="show">权限</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in userList" :key="index">
                    <uni-td align="center">{{ item.sid }}</uni-td>
                    <uni-td align="center">{{ item.name }}</uni-td>
                    <uni-td align="center" v-if="show">{{ item.college }}</uni-td>
                    <uni-td align="center" v-if="show">{{ item.class_id }}</uni-td>
                    <uni-td align="center" v-if="show">
                        <picker
                            class="form-input"
                            mode="selector"
                            :range="departmentList"
                            range-key="department_name"
                            :value="departmentIndex[index]"
                            :data-index="index"
                            :data-uid="item.user_id"
                            @change="departmentChange">

                            <view class="underline">
                                {{ item.department_name===null ? '无':item.department_name }}

                            </view>

                        </picker>
                    </uni-td>
                    <uni-td align="center" v-if="show">{{ item.join_time }}</uni-td>
                    <uni-td align="center" v-if="show">
                        <view v-if="item.authority == 1">
                            <span class="text-green">管理员</span>
                        </view>
                        <view v-else>
                            <span>普通成员</span>
                        </view>
                    </uni-td>

                </uni-tr>
            </uni-table>
            <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            selectedIndexs: [],
            userList: [{
                "college": "",
                "name": "",
                "sid": "",
                "association_id": -1,
                "user_id": -1,
                "join_time": "",
                "apply_time": "",
                "authority": -2,
                "active": -2,
                "department_id": null,
                "department_name": null,
                "class_id": null,
            }],
            departmentList: [{
                "department_id": -1,
                "department_name": "",
            }],
            departmentIndex: [],
            // 每页数据量
            pageSize: 10,
            // 当前页
            pageCurrent: 1,
            // 数据总量
            total: 0,
            id: -1,
            loading: false,
            //是否展开全部行
            show: false,
        }
    },
    onLoad(options) {
        this.id = options.id;
        this.getUserList();
        this.getDepartmentList();
    },
    onPullDownRefresh() {
        this.getUserList();
        uni.stopPullDownRefresh();
    },
    onBackPress() {
        uni.reLaunch({
            url: '../../pages/association/detail/detail?id=' + this.id
        });
    },
    methods: {
        /**
         * 获取用户列表
         */
        getUserList(){
            this.$myFunction.getData(
                app.globalData.ApiUrl+'/api/Android/GetAssociationUserList',{
                    association_id: this.id,
                    SafeCode: uni.getStorageSync('SafeCode')
                }).then(res => {
                    console.log(res);
                    if(res.code == 1){
                        this.userList = res.data;
                        let len = res.data.length;

                        //初始化每一个用户的部门选项
                        let tempDepartmentIndex = [];

                        for(let i = 0; i < len; i++){
                            tempDepartmentIndex.push(-1);
                        }
                        this.departmentIndex = tempDepartmentIndex;
                    }
                });

        },
        getDepartmentList(){
            this.$myFunction.getData(
                app.globalData.ApiUrl+'/api/Android/getAssociationDepartmentList',{
                    association_id: this.id,
                    SafeCode: uni.getStorageSync('SafeCode')
                }).then(res => {
                    console.log(res);
                    if(res.code == 1){
                        this.departmentList = res.data;
                    }
                });

        },
        setAdmin(){
            let setList = [];
            setList = this.selectedItems();

            if(setList.length == 0){
                uni.showToast({
                    title: '请选择用户',
                    icon: 'none'
                });
                return;
            }

            this.$myFunction.getData(
                app.globalData.ApiUrl+'/api/Android/SetAssociationManager',{
                    association_id: this.id,
                    setItems: setList,
                    SafeCode: uni.getStorageSync('SafeCode')
                } ).then(res => {

                    console.log(res);

                    if(res.code == 1){
                        uni.showToast({
                            title: '设置成功',
                            icon: 'none'
                        });
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });

            setTimeout(() => {
                this.getUserList();
            } , 500);

        },
        revokeAdmin(){
            let setList = [];
            setList = this.selectedItems();

            if(setList.length == 0){
                uni.showToast({
                    title: '请选择用户',
                    icon: 'none'
                });
                return;
            }

            this.$myFunction.getData(
                app.globalData.ApiUrl+'/api/Android/RevokeAssociationManager',{
                    association_id: this.id,
                    revokeItems: setList,
                    SafeCode: uni.getStorageSync('SafeCode')
                } ).then(res => {

                    console.log(res);

                    if(res.code == 1){
                        uni.showToast({
                            title: '取消成功',
                            icon: 'none'
                        });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });


            setTimeout(() => {
                this.getUserList();
            } , 500);
        },
        // 多选处理
        selectedItems() {
            return this.selectedIndexs.map(i => this.userList[i])
        },
        // 多选
        selectionChange(e) {
            console.log(e.detail.index)
            this.selectedIndexs = e.detail.index
        },
        // 分页触发
        change(e) {
            this.$refs.table.clearSelection()
            this.selectedIndexs.length = 0
        },

        showColumn(){
            this.show = !this.show;
            uni.showToast({
                title: '点击部门可以修改喔',
                icon: 'none',
                duration: 2000
            });
            setTimeout(() => {
                uni.showToast({
                    title: '可以横屏查看哦！',
                    icon: 'none',
                    duration: 2000
                });
            } , 2000);

        },

        departmentChange(e) {

            //要改变的用户的uid
            let changeUid = e.currentTarget.dataset.uid;

            //要改变的部门的选项id
            let changeIndex = e.detail.value;

            //改变成的部门信息
            let changeDepartment = this.departmentList[changeIndex];


            this.$myFunction.getData(
                app.globalData.ApiUrl+'/api/Android/ChangeUserDepartment',{
                    user_id: changeUid,
                    department_id: changeDepartment.department_id,
                    SafeCode: uni.getStorageSync('SafeCode'),
                    association_id: this.id
                } ).then(res => {
                    console.log(res);
                    if(res.code == 1){
                        uni.showToast({
                            title: '修改成功',
                            icon: 'none'
                        });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });

            setTimeout(() => {
                this.getUserList();
            } , 500);

        },
        output(){

            console.log(app.globalData.ApiUrl+'/api/Android/ExportUserList?association_id='+this.id+'&SafeCode='+uni.getStorageSync('SafeCode'));

            uni.downloadFile({
                url: app.globalData.ApiUrl+'/api/Android/ExportUserList?association_id='+this.id+'&SafeCode='+uni.getStorageSync('SafeCode'),
                success: function (res) {
                    console.log(res);
                    uni.saveFile({
                        tempFilePath: res.tempFilePath,
                        success: function (res) {

                            console.log(res);

                            uni.openDocument({
                                filePath: escape(res.savedFilePath),
                                success: function (res) {
                                    console.log(res);
                                }
                            });
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.underline{
    text-decoration: underline dotted indianred;
}
</style>